body {
    background: url('images/bg.jpg');
    background-repeat: no-repeat;
    background-size: 100% auto;
}
#login-box {
    width: 109%;
    height: auto;
    margin: 0 auto; 
    margin-top: 10%;
	margin-right:0px;
    text-align: center;
    background:rgba(105,105,105,0.4);
    padding: 20px 115px;
}
#login-box h1 {
    color: #fff;
	font-size: 55px;
	font-weight: 30px;
}
#login-box .form .item {
    margin-top:-6px;
}
#login-box .form .item i {
    font-size: 18px;
    color: #fff;
}
#login-box .form .item input {
    width: 234px;
    font-size: 18px;
    border: 0;
    border-bottom: 3px solid #fff;
    padding: 5px 10px;
    background:rgba(255,255,255,0);
    color: #fff;
}
#login-box button {
    margin-top: 49px;
    width: 180px;
    height: 30px;
    font-size: 20px;
    font-weight: 700;
    color: #fff;
    background-image: linear-gradient(to right, #db3125 0%, #578bc3 100%);
    border: 0;
    border-radius: 15px;
}
@charset "utf-8";
/* CSS Document */
*{ margin:0; padding:0;}
.logo1{
	position:relative;
	left:0px;
	top:0px;
}
 .wrap{ width:100%; height:10px; 
        margin:0 auto; 
		/*background-image:url(../images/second.jpg);*/ 
		border:0;
		 }
 
 .header{ width:100%; height:80px; 
          float:left;
		  box-shadow:0px 1px 20px 2px;
		
		  }
          
.logo{ width:150px; height:39px; 
       font-family:"香蕉牛奶"; 
	   font-weight:bold; 
	   font-size:38px; 
	   text-align:left; 
	   float:left; margin-right:50px;
	     }

     .menu-top{ width:1250px; height:480px; 
	         font-family:"微软雅黑", "宋体", "楷体", "黑体"; 
			 text-align:center; 
			 margin:0 auto; 
			 float:inherit right;
	       }
	  
	  .menu ul{background-color:#FFF; 
	           width:1250px; height:auto; 
			   position:relative; 
			   list-style:none;
			       }
      
	  .menu ul li{  width:250px; height:40px; 
	                line-height:60px; 
					text-align:center; 
					position:relative; float:left;
					font-family:"宋体", "楷体", "黑体";
	                font-size:26px; 				 
					            }
      
	  .menu li a:link{ background-color:rgba(0,0,0,0);/*导航栏背景颜色*/
	                   color:#000; 
					   display:block; 
					   width:250px; height:70px; 
					   text-decoration:none;
					   border-bottom:#FC3;
					                     }
     
	  .menu li a:hover{text-decoration:none;	              
	                   color:#ff9d00;
					   border-bottom: 3px solid #ff9d00;
	                   /*鼠标俘动到盒子时，夫盒子与子盒子的背景颜色*/
	                   /*鼠标放到盒子上面时，子列表字体颜色*/
					               }
      .menu li ul {width:250px; 
	              position:absolute; left:0px; top:40px;   
				  display:none; 
				                      }
     
	 .menu li:hover ul{ display:block;
	                     position:relative; left:0px; top:0px; 
						      }
.login{position:absolute;
left:900px;
top:20px;
}
.表单{
	position: absolute;
	left: 527px;
	top: 150px;
}
.box2{position:relative;
margin-top:15px;
}
.box2 input[type="submit"]{
	margin-left:20px;
	padding:5px;
	color:#FFF;
	width:200px;
	font-size:16px;
	border:none;
	border-radius:12px;
	cursor:pointer;
	transition:.5s;
	background-image:linear-gradient(to right,red,#09F,#0F3);
	background-size:200%;
	}
	.box2 input[type="submit"]:hover{
		background-position:right;
		}

	.bo{
	  margin: 0;
	  padding: 0;
	  font-family: "montserrat",sans-serif;
	  background: #f1f1f1;
	  display: flex;
	  height: 0vh;
	  align-items: right;
	  justify-content: center;
	  position: relative;
	  top:-270px;
	  left:30x;
	}
	.share-button{
	  width: 280px;
	  height: 80px;
	  background: #dfe6e9;
	  border-radius: 40px;
	  display: flex;
	  align-items: center;
	  justify-content: center;
	  overflow: hidden;
	  position: relative;
	  left:580px;
	  cursor: pointer;
	  transition: .3s linear;
	}
	.share-button:hover{
	  transform: scale(1.1);
	}
	.share-button span{
	  position: absolute;
	  width: 100%;
	  height: 100%;
	  background: #2d3436;
	  color: #f1f1f1;
	  text-align: center;
	  line-height: 80px;
	  z-index: 999;
	  transition: .6s linear;
	  border-radius: 40px;
	}
	.share-button:hover span{
	  transform: translateX(-100%);
	  transition-delay: .3s;
	}
	.share-button a{
	  flex: 1;
	  font-size: 26px;
	  color: #2d3436;
	  text-align: center;
	  transform: translateX(-100%);
	  opacity: 0;
	  transition: 0.3s linear;
	}
	.share-button:hover a{
	  opacity: 1;
	  transform: translateX(0);
	}
	.share-button a:nth-of-type(1){
	  transition-delay: 1s;
	}
	.share-button a:nth-of-type(2){
	  transition-delay: 0.8s;
	}
	.share-button a:nth-of-type(3){
	  transition-delay: 0.6s;
	}
	.share-button a:nth-of-type(4){
	  transition-delay: 0.4s;
	}
	/* @import url('https://fonts.googleapis.com/css?family=Montserrat:600&display=swap'); */
	  .dy{
	             font-family: tahoma;
	             background: #000;
	             color: #352e2a;
	             background: #000;
	             background-size: cover;
	             background-position: center center;
				
	             
	         }
	     
	.heart-btn{
	  position: absolute;
	  top: 50%;
	  left: 50%;
	  transform: translate(-50%,-50%);
	}
	.content{
	  padding: 13px 16px;
	  display: flex;
	  border: 2px solid #eae2e1;
	  border-radius: 5px;
	  cursor: pointer;
	  position:relative;
	  top:-25px;
	  left:580px;
	}
	.content.heart-active{
	  border-color: #f9b9c4;
	  background: #fbd0d8;
	}
	.heart{
	  position: absolute;
	  background: url("https://www.5g-o.com/codedesign/wp-content/uploads/2020/03/img.png") no-repeat;
	  background-position: left;
	  background-size: 2900%;
	  height: 90px;
	  width: 90px;
	  top: 50%;
	  left: 21%;
	  transform: translate(-50%,-50%);
	}
	.text{
	  font-size: 21px;
	  margin-left: 30px;
	  color: grey;
	  font-family: 'Montserrat',sans-serif;
	}
	.numb:before{
	  content: '12';
	  font-size: 21px;
	  margin-left: 7px;
	  font-weight: 600;
	  color: #9C9496;
	  font-family: sans-serif;
	}
	.numb.heart-active:before{
	  content: '13';
	  color: #000;
	}
	.text.heart-active{
	  color: #000;
	}
	.heart.heart-active{
	  animation: animate .8s steps(28) 1;
	  background-position: right;
	}
	@keyframes animate {
	  0%{
	    background-position: left;
	  }
	  100%{
	    background-position: right;
	  }
	}
	